<template>
	<view>
		<view v-if="!shows">
			<view class="myCar-wrap">
				<view class="myCar-bianji">
					<text @click="bianjis">{{bianji}}</text>
				</view>
				
				<block v-for="(item,index) in myCarsList">
					<view>
						<view class="myCar-data">
							
							<radio value="" :checked="checkedS" color="#007AFF"></radio>
							
							<image :src="item.buycatData[0].wholedata.Coverimg" mode="aspectFill" class="myCar-img"></image>
							<view class="myCar-txt">
								<text>{{item.buycatData[0].wholedata.title}}</text>
								<text>出发日期：{{item.nowdates}}</text>
								<text>出发地：{{item.address}}</text>
								
								<!-- 删除 -->
								<image v-show="showas" class="deleteImg" src="../../static/tab/shanchu.png" mode=""@click="deletes(index,item._id)"></image>
							</view>
							
						</view>
						<view class="myCar-num">
							<text class="myCar-num-price">￥{{item.pricess}}</text>
							<view class="myCar-num-jj">
								<view>商品数量：</view>
								<view>{{item.many}}</view>
							</view>
						</view>
					</view>
				</block>
				
			</view>
			
			<view class="myCar-buy">
				<label class="radio">
					<radio value="" :checked="checkedS" @click="checkedSs"/><text>全选</text>
				</label>
				
				<text>合计：￥59989.00</text>
				<view>
					去下单
				</view>
			</view>
		</view>
		
		<!-- 购物车为空 -->
		<view v-if="shows">
			<vue-kong></vue-kong>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bool:"false",
				shows:false,
				myCarsList:{},
				many:"1",
				ymany:'',
				checkedS:false,
				bianji:'编辑',
				showas:false
			}
		},
		methods: {
			checkedSs(){
				this.checkedS = true
			},
			
			// 删除
			deletes(index,id){
				// console.log(index,id)
				const db = wx.cloud.database()
				db.collection('shangping').where({
					_id:id
				}).remove()
				.then(res=>{
					console.log(res)
				}).catch(err=>{
					console.log(err)
				})
				//刷新购物车数据
				this.reques()
				
			},
			
			//编辑状态切换
			bianjis(){
				this.bianji = this.bianji=='完成' ? '编辑':'完成'
				if(this.bianji=='完成'){
					this.showas = true
				}else if(this.bianji=='编辑'){
					this.showas = false
				}
			},
			//请求购物车数据
			reques(){
				const db = wx.cloud.database()
				db.collection('shangping').get().then(res=>{
					console.log(res.data)
					//全部数据
					this.myCarsList = res.data
					if(res.data.length!=0){
						this.shows = false
					}else{
						this.shows = true
					}
				}).catch(err=>{
					console.log(err)
				})
			}
		},
		onLoad() {
			//请求购物车数据
			this.reques()
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #ebebeb;
	}
	.myCar-wrap{
		margin-bottom: 15upx;
		display: flex;
		flex-direction: column;
		.myCar-bianji{
			display: flex;
			align-items: flex-end;
			text{
				font-weight: bold;
				padding: 20upx;
			}
		}
		.myCar-data{
			position: relative;
			display: flex;
			justify-content: start;
			align-items: center;
			background-color: #ffffff;
			padding: 20upx;
			.myCar-img{
				width: 180upx;
				height: 160upx;
			}
		}
		.myCar-txt{
			// position: relative;
			display: flex;
			flex-direction: column;
			margin-left:15upx ;
			 overflow: hidden;
			 text-overflow: ellipsis;
			 .deleteImg{
				 width: 50upx;
				 height: 50upx;
				 position: absolute;
				 top: 0;right: 0;
			 }
		}
		.myCar-num{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #ffffff;
			padding: 20upx;
			.myCar-num-price{
				color: #ff3a13;
			}
			.myCar-num-jj{
				display: flex;
				view{
					font-weight: bold;
					color: #2aafe8;
				}
				
			}
		}
	}
	
	.myCar-buy{
		width: 100%;
		height: 80upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;left: 0;
		background-color: #ffffff;
		padding: 0 10upx 15upx 10upx;
		text{
			color: #ff421c;
			font-weight: bold;
		}
		view{
			color: #f1f1f1;
			background-color: #ff5d35;
			padding: 25upx 80upx;
		}
	}

</style>
